<template>
    <div class="container">
        <div class="big-pic" :style="{backgroundImage:'url('+require('@/assets/images/test.jpg')+')'}">
            <span class="change"><a-icon type="video-camera" style="margin-right: 5px;" />编辑背景</span>
            <span class="name">行一度空山</span>
        </div>
        <div class="tab">
        </div>
        <img :src="require('@/assets/images/test.jpg')" class="avatar">
    </div>
</template>
<script>
export default {

}
</script>

<style lang="scss" scoped>
.container{
    position: relative;
    min-width:825px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(234,237,243,1);
    box-shadow:0px 1px 3px rgba(0,0,0,0.04);
    opacity:1;
    border-radius:4px;
    margin-bottom: 30px;
    .big-pic{
        background-color: #452334;
        background-size: cover;
        background-repeat: no-repeat;
        height: 309px;
        position: relative;
        .change{
            width:125px;
            height:38px;
            background:rgba(0,0,0,0.4);
            opacity:1;
            border-radius:4px;
            position: absolute;
            right: 10px;
            bottom: 10px;
            font-size: 14px;
            line-height: 38px;
            color: #ffffff;
            text-align: center;
            cursor: pointer;
        }
        .name{
            position: absolute;
            left: 180px;
            bottom: 17px;
            color: #ffffff;
            font-size: 22px;
            line-height: 38px;
        }
    }
    .tab{
        height: 70px;
    }
    .avatar{
        width: 120px;
        height: 120px;
        border-radius: 50%;
        position: absolute;
        bottom: 21px;
        left: 30px;

    }
}
</style>
